
<template>
  <div id="video-item">
    <!-- 可以使用新的视频组件
    https://dplayer.diygod.dev/zh/guide.html#%E5%AE%89%E8%A3%85 -->
    <video-player
      ref="videoPlayer"
      class="video-player vjs-big-play-centered"
      :playsinline="false"
      :options="playerOptions"
      @ready="onPlayerReady"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnd($event)"
    />

    <div class="tools">
      <div class="left">
        <div class="thumb item">
          <i class="bi bi-hand-thumbs-up-fill"></i>
          <span>123</span>
        </div>
        <div class="item comment-num">
          <i class="bi bi-chat-left-text-fill"></i>
          <span>23</span>
        </div>
      </div>
      <div class="right">
        <el-button size="mini" type="primary" plain>生成字幕</el-button>
      </div>
    </div>

    <!-- 视频标签开始 -->
    <div class="video-tags">
      <el-tag>标签一</el-tag>
      <el-tag type="success">标签二</el-tag>
      <el-tag type="info">标签三</el-tag>
      <el-tag type="warning">标签四</el-tag>
      <el-tag type="danger">标签五</el-tag>
    </div>
    <!-- 视频标签结束 -->

    <!-- 视频总结开始 -->
    <div class="video-summary">
      .Net基础视频教程之2-C#基础 .Net基础视频教程之3-运算符
      .Net基础视频教程之4-流程控制 .Net基础视频教程之5-复杂数据类型
      .Net基础视频教程之6-函数 .Net基础视频教程之7-飞行棋项目
      .Net基础视频教程之8-面向对象初级 .Net基础视频教程之9-面向对象继承
      .Net基础视频教程之10-面向对象多态 .Net基础视频教程之11-Winform应用程序
      .Net基础视频教程之12-多线程和网络编程 .Net基础视频教程之13-GD绘图
      .Net基础视频教程之14-HTML+CSS
    </div>
    <!-- 视频总结结束 -->

    <!-- 视频集合开始 -->
    <div class="video-list">
      <el-carousel
        trigger="click"
        height="150px"
        :autoplay="false"
        indicator-position="none"
        arrow="always"
      >
        <el-carousel-item v-for="item in 4" :key="item">
          <div
            style="
              display: flex;
              display: -webkit-flex;
              justify-content: space-between;
            "
          >
            <div
              class="small-video"
              v-for="i of 3"
              :key="i"
              style="width: 30%; height: 120px; cursor: pointer"
            >
              <img
                style="width: 100%; height: 100px; border-radius: 5px"
                src="https://img0.baidu.com/it/u=3460020263,3320305589&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
                alt=""
              />
              <div
                style="font-size: 14px; line-height: 40px; text-align: center"
                class="name"
              >
                Python第一课
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 视频集合结束 -->
    <el-divider></el-divider>
  </div>
</template>

<script>
// 在组件中引入
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
// 注册

export default {
  components: { videoPlayer },
  data() {
    return {
      playerOptions: {
        // videojs options
        muted: true,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm",
          },
        ],
        poster: "https://t7.baidu.com/it/u=90694723,3137312822&fm=193&f=GIF",
      },
    };
  },
  methods: {
    // 准备好了
    onPlayerReady(v) {
      console.log(1);
      console.log(v);
    },
    // 播放了
    onPlayerPlay(v) {
      console.log(2);
      console.log(v);
    },
    // 暂停了
    onPlayerPause(v) {
      console.log(3);
      console.log(v);
    },
    // 播放结束了
    onPlayerEnd(v) {
      console.log(4);
      console.log(v);
    },
  },
};
</script>

<style scoped>
#video-item {
  width: 100%;
  overflow: hidden;
}

#video-item .tools {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  margin: 20px 0;
  align-items: center;
  box-shadow: 0 1px 1px #80808020;
}

#video-item .tools .left {
  display: flex;
  display: -webkit-flex;
  justify-content: start;
  font-size: 15px;
  line-height: 20px;
  cursor: pointer;
}

#video-item .tools .left .item {
  margin-right: 15px;
}

#video-item .video-summary {
  color: gray;
  font-size: 14px;
  line-height: 20px;
  text-indent: 2em;
  margin: 20px 0;
}
</style>